<template>
  <div class="page-header-index-wide">
    <div v-if="role === 'agent_maintain'"></div>
    <template v-else>
      <a-row :gutter="24">
        <!-- 线上收入 -->
        <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
          <chart-card :loading="loading" title="线上收入">
            <a-tooltip title="" slot="action">
              <a-icon type="pay-circle" :style="{ color: '#08c' }" />
            </a-tooltip>
            <div class="list" v-if="dataSource.onlineIncoming">
              <div class="flex flex-y-center">
                <span class="t">商家储备金</span>
                <span class="fz24 bold">￥{{ dataSource.onlineIncoming.reserveFund || 0 }}</span>
              </div>
              <div class="flex flex-y-center">
                <span class="t">商家未提现</span>
                <span class="fz24 bold">￥{{ dataSource.onlineIncoming.withoutWithdrawal || 0 }}</span>
              </div>
              <div class="flex flex-y-center">
                <span class="t">商家已提现</span>
                <span class="fz24 bold">￥{{ dataSource.onlineIncoming.withdrawal || 0 }}</span>
              </div>
            </div>
            <template slot="footer">
              <div class="flex flex-x-between" v-if="dataSource.onlineIncoming">
                线上总收入<span>￥ {{ dataSource.onlineIncoming.totalIncoming || 0 }}</span>
              </div>
            </template>
          </chart-card>
        </a-col>

        <!-- 账户信息 -->
        <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-if="role === 'admin'">
          <chart-card :loading="loading" title="账户信息">
            <a-tooltip title="" slot="action">
              <a-icon type="file-text" :style="{ color: '#ff9e0d' }" />
            </a-tooltip>
            <div class="list" v-if="dataSource.accountInfo">
              <div class="flex flex-y-center">
                <span class="t">会员余额</span>
                <span class="fz24 bold">￥{{ dataSource.accountInfo.memberBalance || 0 }}</span>
              </div>
              <div class="flex flex-y-center">
                <span class="t">会员待提现</span>
                <span class="fz24 bold">￥{{ dataSource.accountInfo.memberToBeWithdrawn || 0 }}</span>
              </div>
              <div class="flex flex-y-center">
                <span class="t">会员提现</span>
                <span class="fz24 bold">￥{{ dataSource.accountInfo.memberWithdrawn || 0 }}</span>
              </div>
            </div>
            <template slot="footer">
              <div class="flex flex-x-between" v-if="dataSource.accountInfo">
                会员充值<span>￥ {{ dataSource.accountInfo.memberRecharge || 0 }}</span>
              </div>
            </template>
          </chart-card>
        </a-col>

        <!-- 今日数据 -->
        <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-else-if="role === 'business'">
          <chart-card :loading="loading" title="今日数据">
            <a-tooltip title="" slot="action">
              <a-icon type="area-chart" :style="{ color: '#fa8c16' }" />
            </a-tooltip>
            <div class="list" v-if="dataSource.todayInfo">
              <div class="flex flex-y-center">
                <span class="t">在线订单数</span>
                <span class="fz24 bold">{{ dataSource.todayInfo.onlineOrderCount || 0 }}</span>
              </div>
              <div class="flex flex-y-center">
                <span class="t">注册用户数</span>
                <span class="fz24 bold">{{ dataSource.todayInfo.registerUserCount || 0 }}</span>
              </div>
              <div class="flex flex-y-center">
                <span class="t">用户数</span>
                <span class="fz24 bold">{{ dataSource.todayInfo.userCount || 0 }}</span>
              </div>
            </div>
            <template slot="footer">
              <div class="flex flex-x-between" v-if="dataSource.todayInfo">
                今日订单金额<span>{{ dataSource.todayInfo.todayOrderAmount || 0 }}</span>
              </div>
            </template>
          </chart-card>
        </a-col>

        <!-- 在线订单 -->
        <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
          <chart-card :loading="loading" title="在线订单">
            <a-tooltip title="" slot="action">
              <a-icon type="profile" :style="{ color: '#08c' }" />
            </a-tooltip>
            <div class="list" v-if="dataSource.onlineOrder">
              <div class="flex flex-y-center">
                <span class="t">在线订单金额</span>
                <span class="fz24 bold">￥{{ dataSource.onlineOrder.onlineOrderAmount || 0 }}</span>
              </div>
              <div class="flex flex-y-center">
                <span class="t">订单退款金额</span>
                <span class="fz24 bold">￥{{ dataSource.onlineOrder.orderRefundAmount || 0 }}</span>
              </div>
              <div class="flex flex-y-center">
                <span class="t">在线订单数</span>
                <span class="fz24 bold">{{ dataSource.onlineOrder.onlineOrderCount || 0 }}</span>
              </div>
            </div>
            <template slot="footer">
              <div class="flex flex-x-between" v-if="dataSource.onlineOrder">
                订单总收益<span>￥ {{ dataSource.onlineOrder.totalOrderIncoming || 0 }}</span>
              </div>
            </template>
          </chart-card>
        </a-col>

        <!-- 注册人数 -->
        <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
          <chart-card :loading="loading" title="注册人数">
            <a-tooltip title="" slot="action">
              <a-icon type="usergroup-add" :style="{ color: '#08c' }" />
            </a-tooltip>
            <div class="list">
              <div class="flex flex-y-center">
                <span class="t">注册人数</span>
                <span class="fz24 bold">{{ dataSource.registerUserCount || 0 }}</span>
              </div>
            </div>
            <template slot="footer">
              <div class="flex flex-x-between">
                注册人数<span>{{ dataSource.registerUserCount || 0 }}</span>
              </div>
            </template>
          </chart-card>
        </a-col>
      </a-row>

      <!-- 今日数据 -->
      <a-card
        v-if="role === 'admin'"
        class="today-data"
        :loading="loading"
        :bordered="false"
        :body-style="{ padding: '0' }"
        :style="{ marginBottom: '24px' }"
      >
        <div slot="title" class="title flex flex-y-center">
          <a-icon class="icon bg-blue mr10" type="area-chart" />今日数据
        </div>
        <a-row class="row t-c" v-if="dataSource.todayInfo">
          <a-col :span="4">
            <a-icon class="icon bg-blue" type="profile" />
            <div class="num bold fz30">{{ dataSource.todayInfo.onlineOrderCount || 0 }}</div>
            <div class="text">在线订单数</div>
          </a-col>
          <a-col :span="4">
            <a-icon class="icon bg-orange" type="profile" />
            <div class="num bold fz30">{{ dataSource.todayInfo.todayOrderAmount || 0 }}</div>
            <div class="text">在线订单金额</div>
          </a-col>
          <a-col :span="4">
            <a-icon class="icon bg-green" type="credit-card" />
            <div class="num bold fz30">{{ dataSource.todayInfo.depositCount || 0 }}</div>
            <div class="text">账户押金金额</div>
          </a-col>
          <a-col :span="4">
            <a-icon class="icon bg-red" type="pay-circle" />
            <div class="num bold fz30">{{ dataSource.todayInfo.refundDepositCount || 0 }}</div>
            <div class="text">用户提现金额</div>
          </a-col>
          <a-col :span="4">
            <a-icon class="icon bg-blue" type="team" />
            <div class="num bold fz30">{{ dataSource.todayInfo.registerUserCount || 0 }}</div>
            <div class="text">注册用户数</div>
          </a-col>
          <a-col :span="4">
            <a-icon class="icon bg-purpler" type="shopping-cart" />
            <div class="num bold fz30">{{ dataSource.todayInfo.userCount || 0 }}</div>
            <div class="text">用户数</div>
          </a-col>
        </a-row>
      </a-card>

      <!-- 柜门统计 -->
      <a-row :gutter="[24]">
        <a-col :sm="24" :md="24" :xl="12" :style="{ marginBottom: '24px' }">
          <a-card class="today-data" :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
            <div slot="title" class="title flex flex-y-center">
              <a-icon class="icon bg-blue mr10" type="area-chart" />柜门统计
            </div>
            <div class="row" :style="{ height: '300px', 'padding-top': '50px' }">
              <pie-chart v-if="showPie" :dataSource="chartData"></pie-chart>
              <div style="display: flex; justify-content: center;font-weight: bold;font-size: 20px;" v-else>
                数据为空
              </div>
            </div>
          </a-card>
        </a-col>

        <!-- 网点数据统计 -->
        <a-col :sm="24" :md="24" :xl="12" :style="{ marginBottom: '24px' }">
          <a-card class="today-data" :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
            <div slot="title" class="title flex flex-y-center">
              <a-icon class="icon bg-blue mr10" type="area-chart" />网点数据统计
            </div>
            <a-row class="row t-c ct" v-if="dataSource.networkStatistics">
              <a-col :span="6">
                <a-icon class="icon bg-blue" type="cluster" />
                <div class="num bold fz30">{{ dataSource.networkStatistics.networkCount || 0 }}</div>
                <div class="text">网点数量</div>
              </a-col>
              <a-col :span="6">
                <a-icon class="icon bg-orange" type="apartment" />
                <div class="num bold fz30">{{ dataSource.networkStatistics.equipmentCount || 0 }}</div>
                <div class="text">设备数量</div>
              </a-col>
              <a-col :span="6">
                <a-icon class="icon bg-green" type="wifi" />
                <div class="num bold fz30">{{ dataSource.networkStatistics.onlineEquipmentCount || 0 }}</div>
                <div class="text">在线设备数量</div>
              </a-col>
              <a-col :span="6">
                <a-icon class="icon bg-red" type="disconnect" />
                <div class="num bold fz30">{{ dataSource.networkStatistics.offlineEquipmentCount || 0 }}</div>
                <div class="text">离线设备数量</div>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </template>
  </div>
</template>

<script>
import store from '@/store/'
import { getAction } from '@/api/manage'
import Api from '@/api/Index/index'
import ChartCard from '@/components/ChartCard'
import PieChart from '@/components/chart/Pie.vue'

export default {
  name: 'IndexChart',
  components: {
    ChartCard,
    PieChart
  },
  data() {
    return {
      loading: true,
      role: 'agent_maintain', // admin(admin,developer),business(business, agent),agent_maintain
      chartData: [],
      dataSource: {}
    }
  },
  created() {
    if (this.hasRole('admin') || this.hasRole('developer')) {
      this.role = 'admin'
    } else if (this.hasRole('business') || this.hasRole('agent')) {
      this.role = 'business'
    }
    this.loadData()
  },
  computed: {
    showPie() {
      return this.chartData && this.chartData.length > 0 && this.chartData.filter(item => item.count > 0).length > 0
    }
  },
  methods: {
    loadData() {
      this.loading = true
      let url = ''
      if (this.role === 'admin') {
        url = Api.admin
      } else if (this.role === 'business') {
        url = Api.business
      } else {
        return false
      }
      getAction(url)
        .then(res => {
          if (res.code === 200) {
            this.dataSource = res.result

            this.chartData = [
              { item: '可用柜门', count: res.result.cellStatistics.available.count || 0 },
              { item: '占用柜门', count: res.result.cellStatistics.used.count || 0 },
              { item: '禁用柜门', count: res.result.cellStatistics.useForbidden.count || 0 },
              { item: '禁取柜门', count: res.result.cellStatistics.takeForbidden.count || 0 }
            ]
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    hasRole(name) {
      const hasRole = store.getters.roles.find(item => {
        return item.roleCode === name
      })
      return !!hasRole
    }
  }
}
</script>

<style lang="less" scoped>
.list {
  .t {
    width: 150px;
  }
}

// 今日数据
.today-data {
  .bg-blue {
    color: #1890ff;
    background: #e6f7ff;
  }
  .bg-orange {
    color: #fa8c16;
    background: #fff7e6;
  }
  .bg-green {
    color: #52c41a;
    background: #f6ffed;
  }

  .bg-red {
    color: #f5222d;
    background: #fff1f0;
  }

  .bg-purpler {
    color: #722ed1;
    background: #f9f0ff;
  }

  .icon {
    padding: 5px;
    border-radius: 50%;
  }

  .row {
    padding: 50px 0;
    .icon {
      padding: 10px;
      font-size: 18px;
    }
  }

  .ct {
    padding: 100px 0 0;
    height: 300px;
  }
}
</style>

